import { NodeSize } from '../config'

export default function mergeJoin(flow) {
  flow.register('MergeJoin', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#FFFFFF',
              d: 'M578.633143 463.36h373.784381v97.304381H578.633143z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M537.209905 421.936762v180.175238h456.630857v-180.175238H537.209905z m415.207619 138.727619H578.633143v-97.304381h373.784381v97.304381zM257.706667 253.366857h497.273904v98.401524l-48.249904-48.249905-13.799619 13.824 71.119238 71.070476 71.777524-71.826285-13.79962-13.799619-47.518476 47.591619v-116.540953H238.201905v134.777905h19.504762zM692.931048 708.583619l13.799619 13.824 48.249904-48.249905v96.49981H257.706667v-107.641905h-19.504762v127.171048h536.307809v-116.028953l47.518476 47.542857 13.79962-13.824-71.094858-71.070476z'
            }
          ),
          h(
            'path',
            {
              fill: '#FF9C04',
              d: 'M362.032762 617.935238l44.909714-44.909714a100.473905 100.473905 0 0 0 0-141.970286l-9.142857-9.142857a99.718095 99.718095 0 0 0-137.971809-3.291429l-0.219429-0.195047-50.054095 50.078476a100.425143 100.425143 0 0 0-20.772572 106.76419l34.474667-34.499047c-0.804571-16.091429 4.705524-32.426667 16.944762-44.665905l16.384-16.384v0.048762l30.793143-30.793143 0.195047 0.195048a58.514286 58.514286 0 0 1 80.920381 2.023619l9.142857 9.142857c11.117714 11.142095 17.261714 25.941333 17.261715 41.715809 0 15.750095-6.144 30.549333-17.261715 41.691429l-44.909714 44.909714c-16.920381 16.871619-43.300571 20.870095-64.78019 12.166096l-30.744381 30.72a99.59619 99.59619 0 0 0 53.833143 15.823238c26.819048 0 52.028952-10.459429 70.997333-29.42781z'
            }
          ),
          h(
            'path',
            {
              fill: '#FF9C04',
              d: 'M265.142857 580.85181l7.826286-7.850667a100.449524 100.449524 0 0 0 22.064762-108.665905l-34.425905 34.401524c0.048762 1.097143 0.316952 2.169905 0.316952 3.267048 0 12.8-4.242286 24.868571-11.727238 34.962285l0.414476 0.414476-4.169142 4.169143c-0.633905 0.682667-1.097143 1.487238-1.755429 2.145524l-16.359619 16.359619-0.097524-0.292571-33.645714 33.670095-0.780191 0.024381c-22.77181 17.066667-57.002667 15.579429-77.433904-4.803048l-9.142857-9.142857a59.099429 59.099429 0 0 1 0-83.407238l44.909714-44.909714a58.660571 58.660571 0 0 1 65.048381-12.385524l30.47619-30.476191a99.425524 99.425524 0 0 0-53.833143-15.847619 99.669333 99.669333 0 0 0-70.997333 29.42781l-44.909714 44.909714a100.473905 100.473905 0 0 0 0 141.970286l9.142857 9.142857a99.718095 99.718095 0 0 0 137.971809 3.291429l0.24381 0.195047 40.740571-40.764952 0.121905 0.195048z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '记录集连接'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
